<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>

    <style>
        .myDiv{
            width: 100px;
            height: 100px;
            background-color: coral;
        }
    </style>

</head>

<body>

<div id="app">
    <h3>将data中的数据放到HTML的属性</h3>
    <span v-bind:id="id" v-text="userName"></span><br/>
    <input type="text" v-bind:value="userName"><br/>
    <input type="text" v-bind:value="password"><br/>
    <img v-bind:src="imagePath" v-bind:title="myTitle" />

    <div v-bind:class="myClass" >
        div测试。。。。
    </div>
    <a href="">链接</a>
</div>

</body>

<script>
    const app = Vue.createApp({
        data(){
            return{
                id:100,
                userName:'张三',
                password:'123456',
                imagePath:'http://localhost:8001/02.png',
                myTitle:'这是一张图片',
                myClass:'myDiv'
            }
        }
    }).mount('#app')
</script>

</html>